<template>
  <div>
    <HeaderBar>
      <template #back>
        <van-icon @click="$router.go(-1)" name="arrow-left" class="arrow" />
      </template>
    </HeaderBar>
    <div>

      <ContentLoader v-if="loading">
        <rect x="89" y="8" rx="3" ry="3" width="88" height="6" />
        <rect x="84" y="29" rx="3" ry="3" width="52" height="6" />
        <rect x="84" y="56" rx="3" ry="3" width="344" height="5" />
        <rect x="93" y="72" rx="3" ry="3" width="308" height="5" />
        <rect x="96" y="92" rx="3" ry="3" width="103" height="3" />
        <rect x="0" y="2" rx="0" ry="0" width="68" height="97" />
      </ContentLoader>

      <div v-if="!loading">
        <div class="detail box-flex">
          <div class="poster">
            <img :src="item.img|formatImg('110.150')">
          </div>
          <div class="content flex">
            <div class="title middle line-ellipsis">抵达之谜</div>
            <div class="title-en-name line-ellipsis">The Enigma Of Arrival</div>
            <div class="score line-ellipsis">

              <span class="no-score">暂无评分</span>

            </div>
            <div class="type line-ellipsis">
              <span>剧情,爱情,青春</span>

              <div class="type-group">

              </div>

            </div>
            <div class="src line-ellipsis">中国大陆/114分钟</div>
            <div class="pubDesc line-ellipsis">2020-07-31中国大陆上映</div>
          </div>
        </div>

        <div class="days">
          <ul :style="{left:toleft+'px'}">
            <li v-for="(d ,index) in showDays.dates" @click="handleClick(index,$event)" :key="index">
              {{d.date}}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderBar from "@/components/HeaderBar"
import { post } from "@/api/http"
import { ContentLoader } from "vue-content-loader"

export default {
  data() {
    return {
      loading: true,
      cinemas: [],
      showDays: {
        dates: []
      },
      toleft: 0
    }
  },
  computed: {
    item() {
      return this.$route.params
    }
  },
  components: {
    HeaderBar,
    ContentLoader
  },
  created() {
    setTimeout(async () => {
      let rs = await post("/ajax/movie", {
        movieId: 342485,
        day: "2020-07-31",
        offset: 0,
        limit: 20,
        districtId: -1,
        lineId: -1,
        hallType: -1,
        brandId: -1,
        serviceId: -1,
        areaId: -1,
        stationId: -1,
        item: "",
        updateShowDay: true,
        reqId: 1596160976394,
        cityId: 10
      })
      console.log(rs)
      this.cinemas = rs.data.cinemas
      this.showDays = rs.data.showDays
      this.$nextTick(() => {
        this.loading = false
      })
    }, 2000)
  },
  methods: {
    handleClick(index, event) {
      //当前x坐标值
      let currentX = event.pageX
      //标签的真实的宽度，不能写死
      let width = event.target.getBoundingClientRect().width
      if (currentX < width && index > 0) {
        this.toleft += width
        //当前的坐标值大于2倍的单项的宽度
      } else if (
        currentX > 2 * width &&
        index < this.showDays.dates.length - 1
      ) {
        this.toleft -= width
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.arrow {
  &::before {
    color: white;
    font-size: 30px;
    line-height: 20px;
  }
}
.detail {
  display: flex;
}
.days {
  overflow: hidden;
  padding: 10px;
  position: relative;
  ul {
    transition: all 400ms;
    position: absolute;
    left: 0px;
    bottom: 5px;
    white-space: nowrap;
    li {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>


